<template>
  <div class="news-main">
    <h2>新闻管理</h2>

    <!-- 主体 -->
    <div class="container">
      <!-- 搜索栏 -->
      <el-card class="box-card card">
        <el-row :gutter="20">
          <el-col :span="4" :offset="0">
            <el-input
              v-model="search.title"
              placeholder="文章名称查询"
              size="small"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-input
              v-model="search.author"
              placeholder="作者名查询"
              size="small"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-button type="primary" size="small" @click="goSearch"
              >查找</el-button
            >
            <el-button size="small" @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-card>

      <!-- 文章列表 -->
      <el-card shadow="always" class="card">
        <div slot="header">
          <el-button type="primary" size="default" @click="goNewsDetail()"
            >新增</el-button
          >
        </div>
        <el-table
          :data="newsList"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column fixed type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="200">
          </el-table-column>
          <el-table-column prop="author" label="文章作者" width="120">
          </el-table-column>
          <el-table-column prop="desc" label="文章摘要" width="300">
          </el-table-column>
          <el-table-column label="文章封面" width="120">
            <template slot-scope="scope">
              <div>
                <el-image
                  :src="scope.row.cover"
                  fit="fill"
                  :lazy="true"
                ></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否热门" width="120">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.hot == 1 ? "热门" : "否" }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="阅读量/赞" width="120">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.viewCount }}</span
                >/<span>{{ scope.row.zanCount }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="添加时间" width="180">
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="primary"
                @click="goNewsDetail(scope.row.id)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="removeNews(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 30px; text-align: right"
          :current-page="page.start"
          :page-sizes="page.sizes"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { newsList as newsListApi,newsDel as newsDelApi } from "@/api/repos/news";
import Detail from "./components/Detail";
export default {
  name: "reposNews",
  data() {
    return {
      loading: false,
      newsList: [],
      search: {},
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        total: 0,
      },
    };
  },
  methods: {
    goSearch() {
      this.getNewsList();
    },
    resetSearch() {
      this.search = {};
      this.getNewsList();
    },
    getNewsList() {
      // 开启loading
      this.loading = true;
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };
      newsListApi(params).then((res) => {
        console.log(res);
        this.newsList = res.data.list;
        this.page.total = res.data.totalRow;
        this.loading = false;
      });
    },
    goNewsDetail(id) {
      this.$router.push({
        path: "/repos/newsDetail",
        query: {
          id,
        },
      });
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.getNewsList();
    },
    handleCurrentChange(val) {
      this.page.start = val;
      this.getNewsList();
    },
    removeNews(id) {
      this.$confirm("是否删除该文章?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          newsDelApi({ id }).then((res) => {
            console.log(res);
            this.getNewsList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    //新闻列表初始化
    this.getNewsList();
  },
};
</script>

<style lang="scss" scoped>
.news-main {
  padding: 0 20px;
  margin-bottom: 50px;
  .card {
    margin: 10px 20px;
  }
}
</style>
